<template>
  <div class="main">
    <div v-if="$route.path=='/home'">
      <!-- 搜索区域 -->
      <div class="main-from" @click="getsearch">
        <van-search :readonly="true" shape="round" placeholder="请输入搜索关键词" class="vansearch" />
      </div>
      <!-- 轮播图 -->
      <div>
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" :height="200">
          <van-swipe-item v-for="(banner,index) in HomePage1.banner" :key="index">
            <img :src="banner.image_url" width="100%">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 导航图标 -->
      <div>
        <div class="mainNavigationicon">
          <div class="Navigationicon" v-for="(icon,index) in HomePage1.channel" :key="icon.id">
            <img :src="icon.icon_url" class="img">
            <span class="span">{{icon.name}}</span>
          </div>

        </div>

      </div>
      <!-- 品牌制造商 -->
      <div class="Brand_manufacturer">
        <div class="div">
          <span class="ppzxszg">品牌制造商直供</span>
        </div>
        <div class="img">
          <img :src="img.app_list_pic_url" style="width:46%" v-for="(img,index) in HomePage1.brandList" :key="img.id">
        </div>

      </div>
      <Commodity :newGoodsList="newGoodsList" :name="name"></Commodity>
      <Popular :hotGoodsList="hotGoodsList"></Popular>
      <div v-for="cat in HomePage1.categoryList" :key="cat.id">
        <Commodity :newGoodsList="cat.goodsList" :name="cat.name"></Commodity>
      </div>
    </div>
    <van-popup v-model="show" position="right" :style="{ height: '100%',width:'100%' }" :close-on-popstate="true">
      <router-view></router-view>
    </van-popup>
  </div>
</template>

<script>
import Commodity from '@/components/Commoditycomponents.vue'
import Popular from '@/components/Popularrecommendation.vue'
// @ is an alias to /src
import { mapState } from 'vuex'
export default {
  name: 'HomeView',
  data() {
    return {
      //向子组件传的数据
      newGoodsList: [],
      hotGoodsList: [],
      name: '新品首发',
      show: false
    }
  },
  computed: {
    ...mapState({
      HomePage1: state => state.login.Homepage
    })
  },
  mounted() {
    this.getHomepageList()
  },
  components: {
    Commodity,
    Popular
  },
  methods: {
    getHomepageList() {
      this.$store.dispatch('getHomepageList')
      // console.log(this.HomePage1)
      setTimeout(() => {
        this.newGoodsList = this.HomePage1.newGoodsList
        this.hotGoodsList = this.HomePage1.hotGoodsList
      }, 500)
    },
    //点击搜索跳转到搜索路由页面
    getsearch() {
      this.$router.push({ name: 'search' })
      this.show = true
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  //搜索区域
  .main-from {
    .vansearch {
    }
  }
  //导航图标
  .mainNavigationicon {
    display: flex;
    .Navigationicon {
      background-color: #fff;
      border-right: 0.5px solid #cfcdcd;
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      padding: 5% 0%;
      img {
        width: 38%;
        height: 58%;
      }
      span {
        padding-top: 8%;
        font-size: 0.12rem;
      }
    }
  }
  //品牌制造商
  .Brand_manufacturer {
    margin-top: 5%;
    height: 20%;
    width: 100%;
    background-color: #fff;
    padding-bottom: 3%;
    border-bottom: 1px solid #cfcdcd;
    .div {
      display: flex;
      justify-content: center;
      .ppzxszg {
        display: block;
        padding-top: 6%;
        font-size: 0.2rem;
      }
    }
    .img {
      display: flex;
      flex-wrap: wrap;
      img {
        padding: 2% 2%;
      }
    }
  }
}
</style>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.5rem;
  text-align: center;
  background-color: #39a9ed;
}
</style>
